<template>
	<div>
		<!--面包屑-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }"> 首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!--卡片视图-->
		<el-card>
			<!--搜索栏及添加商品行-->
			<el-row :gutter="20">
				<el-col :span="4">
					<el-input placeholder="请输入内容" v-model="queryinfo.query" clearable @clear="getGoodsList">
						<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="goAddGoods">添加商品</el-button>
				</el-col>
			</el-row>

			<!--商品列表-->
			<el-table :data="goodsList" stripe border>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column prop="goods_name" label="商品名称"> </el-table-column>
				<el-table-column prop="goods_price" label="商品价格(元)" width="100px"> </el-table-column>
				<el-table-column prop="goods_weight" label="商品重量" width="100px"> </el-table-column>
				<el-table-column prop="add_time" label="创建时间" width="150px">
					<template slot-scope="scoped">
						{{ scoped.row.add_time | dateFormat }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160px">
					<!--作用域插槽-->
					<template slot-scope="scoped">
						<el-button @click="editGoodsList(scoped.row)" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
						<el-button @click="deleteGoodsList(scoped.row)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
					</template>
				</el-table-column>
			</el-table>

			<!--分页-->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryinfo.pagenum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="queryinfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				background
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			queryinfo: {
				query: '',
				pagenum: 1,
				pagesize: 10,
			},
			goodsList: [],
			total: 0,
		}
	},

	created() {
		this.getGoodsList()
	},
	methods: {
		// 获取商品列表 axios请求
		async getGoodsList() {
			const { data: res } = await this.$http.get('goods', { params: this.queryinfo })
			if (res.meta.status !== 200) {
				return this.$message.error('获取商品列表失败')
			} else {
				this.goodsList = res.data.goods
				this.total = res.data.total
				// console.log(this.goodsList)
			}
		},

		// 监控选择每页展示几个
		handleSizeChange(newsize) {
			this.queryinfo.pagesize = newsize
			this.getGoodsList()
		},

		// 监控跳转其它页数
		handleCurrentChange(newpage) {
			this.queryinfo.pagenum = newpage
			this.getGoodsList()
		},

		// 删除商品列表
		deleteGoodsList(row) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const { data: res } = await this.$http.delete('goods/' + row.goods_id)
					if (res.meta.status !== 200) {
						return this.$message.error('删除失败')
					} else {
						await this.getGoodsList()
						this.$message({
							type: 'success',
							message: '删除成功!',
						})
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},

		// 跳转添加商品页
		goAddGoods() {
			this.$router.push('/goods/add')
		},

		// 跳转修改商品页
		editGoodsList(row) {
			// console.log(row.goods_id)
			// 有三种方式可以在路由跳转时进行传值
			// 1、地址后面直接拼接,不过需要修改路由格式（暴露）
			// this.$router.push('/goods/edit' + '/' + row.goods_id)
			// 2、query属性传值
			// this.$router.push({ name: 'edit', query: { row:row } })
			// 3、params属性传值(隐秘的，最好用)
      this.$router.push({ name: 'edit', params: { row:row } })

    },
	},
}
</script>

<style lang="less" scoped></style>
